// https://github.com/vueComponent/ant-design-vue-pro/commit/8f7600143be405cf8de6c950070ac7a80abb1235
// vue.config.js for less-loader@5.0.0
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const { generate } = require('@ant-design/colors')

const { modifyVars } = require('./src/themeUtil')

module.exports = {
  css: {
    loaderOptions: {
      less: {
        /* less 变量覆盖，用于自定义 ant design 主题 */
        // If you are using less-loader@5 please spread the lessOptions to options directly
        modifyVars: modifyVars('#faad14'),
        javascriptEnabled: true
      }
    }
  },
  configureWebpack: config => {
    config.plugins.push(
      new ThemeColorReplacer({
        fileName: 'css/theme-colors-[contenthash:8].css',
        matchColors: getAntdSerials('#faad14'), // 主色系列
        // 改变样式选择器，解决样式覆盖问题
        changeSelector (selector) {
          switch (selector) {
            case '.ant-calendar-today .ant-calendar-date':
              return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
            case '.ant-btn:focus,.ant-btn:hover':
              return '.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)'
            case '.ant-btn.active,.ant-btn:active':
              return '.ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)'
            case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
            case '.ant-steps-item-process .ant-steps-item-icon>.ant-steps-icon':
              return ':not(.ant-steps-item-process)' + selector
            // fixed https://github.com/vueComponent/ant-design-vue-pro/issues/876
            case '.ant-steps-item-process .ant-steps-item-icon':
              return ':not(.ant-steps-item-custom)' + selector
            case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':
            case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':
              return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
            case '.ant-menu-horizontal > .ant-menu-item-selected > a':
            case '.ant-menu-horizontal>.ant-menu-item-selected>a':
              return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item-selected > a'
            case '.ant-menu-horizontal > .ant-menu-item > a:hover':
            case '.ant-menu-horizontal>.ant-menu-item>a:hover':
              return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item > a:hover'
            default :
              return selector
          }
        }
      })
    )
  },
}


function getAntdSerials (color) {
  var lightens = new Array(9).fill().map((t, i) => {
    console.log(t)
    return ThemeColorReplacer.varyColor.lighten(color, i / 10)
  })
  const colorPalettes = generate(color)
  const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace('#', '')).join(',')
  return lightens.concat(colorPalettes).concat(rgb)
}